<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="icon" href="/favicon.ico" th:href="@{/favicon.ico}" sizes="32x32">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>注册</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="images/favicon.ico" th:href="@{/images/favicon.ico}"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="css/typography.css" th:href="@{/css/typography.css}">
    <!-- Style CSS -->
    <link rel="stylesheet" href="css/style.css" th:href="@{/css/style.css}">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="css/responsive.css" th:href="@{/css/responsive.css}">
</head>
<body>
<!-- loader Start -->
<div id="loading">

</div>
<!-- loader END -->
<!-- Sign in Start -->
<section class="sign-in-page">
    <div class="container p-0">
        <div class="row no-gutters">
            <div class="col-sm-12 align-self-center">
                <div class="sign-in-from bg-white">
                    <h1 class="mb-0">创建一个员工</h1>
                    <p>输入您的用户名、邮箱、密码</p>
                    <div class="alert alert-danger" role="alert" style="display: none">
                        <div class="iq-alert-text">A simple <b>danger</b> alert—check it out!</div>
                    </div>
                    <form class="mt-4" action="/user/register" method="post" onsubmit="return checkUserInfo()">
                        <div class="form-group">
                            <label for="exampleInputEmail1">用户名</label>
                            <input type="text" class="form-control mb-0" id="exampleInputEmail1"
                                   placeholder="请输入您的用户名" maxlength="20" name="username" pattern="^[\u4e00-\u9fa5|\w]+$"
                                   title="请输入最大为20位的中文、数字、字母、下划线"
                                   required="required">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail2">邮箱</label>
                            <input type="email" class="form-control mb-0" id="exampleInputEmail2"
                                   placeholder="请输入您的邮箱" maxlength="50" name="email"
                                   pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" title="请输入正确的邮箱格式"
                                   required="required">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">密码</label>
                            <input type="password" class="form-control mb-0" id="exampleInputPassword1"
                                   placeholder="请输入您的密码" maxlength="20" name="password" pattern="^[a-zA-Z]\w{5,17}$"
                                   title="请输入以字母开头，长度在6~18之间，只能包含字母、数字和下划线" required="required">
                        </div>
                        <div class="d-inline-block w-100">
                            <div class="custom-control custom-checkbox d-inline-block mt-2 pt-1">
                                <input type="checkbox" class="custom-control-input" id="customCheck1"
                                       disabled="disabled">
                                <label class="custom-control-label" for="customCheck1">接受 <a href="#"
                                                                                             id="showRule">员工准则</a></label>
                            </div>
                            <button type="submit" class="btn btn-primary float-right">注册</button>
                        </div>
                        <div class="sign-info">
                            <span class="dark-color d-inline-block line-height-2">已经是企业员工了 ? <a
                                    href="/sign-in">点此登录</a></span>
                            <!-- 注册方式小图标 -->
                            <ul class="iq-social-media" hidden="hidden">
                                <li><a href="#"><i class="ri-facebook-box-line"></i></a></li>
                                <li><a href="#"><i class="ri-twitter-line"></i></a></li>
                                <li><a href="#"><i class="ri-instagram-line"></i></a></li>
                            </ul>
                        </div>
                    </form>
                </div>
                <div class="sign-in-from bg-white" style="display: none">
                    <h1 class="mb-0">员工准则</h1>
                    <p>编撰中……（点击返回即可）</p>
                    <button type="button" class="btn btn-primary">返回</button>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Sign in END -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="js/popper.min.js" th:src="@{/js/popper.min.js}"></script>
<script src="js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- Appear JavaScript -->
<script src="js/jquery.appear.js" th:src="@{/js/jquery.appear.js}"></script>
<!-- Countdown JavaScript -->
<script src="js/countdown.min.js" th:src="@{/js/countdown.min.js}"></script>
<!-- Counterup JavaScript -->
<script src="js/waypoints.min.js" th:src="@{/js/waypoints.min.js}"></script>
<script src="js/jquery.counterup.min.js" th:src="@{/js/jquery.counterup.min.js}"></script>
<!-- Wow JavaScript -->
<script src="js/wow.min.js" th:src="@{/js/wow.min.js}"></script>
<!-- Apexcharts JavaScript -->
<script src="js/apexcharts.js" th:src="@{/js/apexcharts.js}"></script>
<!-- Select2 JavaScript -->
<script src="js/select2.min.js" th:src="@{/js/select2.min.js}"></script>
<!-- Owl Carousel JavaScript -->
<script src="js/owl.carousel.min.js" th:src="@{/js/owl.carousel.min.js}"></script>
<!-- Magnific Popup JavaScript -->
<script src="js/jquery.magnific-popup.min.js" th:src="@{/js/jquery.magnific-popup.min.js}"></script>
<!-- Smooth Scrollbar JavaScript -->
<script src="js/smooth-scrollbar.js" th:src="@{/js/smooth-scrollbar.js}"></script>
<!-- Chart Custom JavaScript -->
<script src="js/chart-custom.js" th:src="@{/js/chart-custom.js}"></script>
<!-- Custom JavaScript -->
<script src="js/custom.js" th:src="@{/js/custom.js}"></script>
<script type="text/javascript">
    // 员工准则显示/隐藏---start
    let signUpDiv = $("div.bg-white:eq(0)");
    let ruleDiv = $("div.bg-white:eq(1)");
    let ruleCheckBox = $("#customCheck1");
    $("#showRule").click(function () {
        signUpDiv.slideUp();
        ruleDiv.slideDown();
    });
    $("div.bg-white:eq(1) button.btn").click(function () {
        signUpDiv.slideDown();
        ruleDiv.slideUp();
        ruleCheckBox.removeAttr("disabled");
        ruleCheckBox.attr("checked", "true");
    });
    // 员工准则显示/隐藏---end

    // 定义访问限制所用变量
    var restrictions = 0;

    // 注册表单提交时的验证方法
    function checkUserInfo() {
        // 访问限制--start
        if (restrictions === 0) {

            restrictions = 1

            // 对后端进行的请求，三秒一次

            setTimeout(function () {
                restrictions = 0
            }, 3000) //限制为3s

        } else {
            alert("请求过于频繁");
            return false;
        }
        // 访问限制---end

        // ajax验证输入信息是否存在---start
        var flag = true;
        $.ajax({
            type: "POST",
            url: "/user/checkUserInfo",
            data: $("form.mt-4").serialize(),
            dataType: "text",
            async: false,
            success: function (data) {
                flag = false;
                if (null != data && "" !== data) {
                    showCheckResult(data);
                } else {
                    flag = true;
                }
            },
            error: function () {
                flag = false;
                showCheckResult("验证用户信息出现异常");
            }
        });
        // ajax验证输入信息是否存在---end
        // 验证是否勾选用户准则
        let checkFlag = $("#customCheck1").is(":checked");
        if (false === checkFlag) {
            flag = false;
            showCheckResult("请接受员工准则！");
        }
        return flag;
    }

    // 定义提示框显示定时器
    let interval;
    // 注册返回验证结果显示
    function showCheckResult(data) {
        let alertDanger = $("div.alert-danger div.iq-alert-text");
        alertDanger.parent().slideDown("slow");
        alertDanger.text(data);
        interval = setInterval(hideCheckResult, 3000);
    }

    // 隐藏验证结果
    function hideCheckResult() {
        $("div.alert-danger").slideUp("slow");
        clearInterval(interval);
    }
</script>
</body>
</html>